{extend name='main'}

{block name="button"}

{if auth('login/in')}
<button class='layui-btn layui-btn-sm layui-btn-primary' data-modal="{:url('login/in')}">登 录</button>
{/if}

{if auth('index/index')}
<button class='layui-btn layui-btn-sm layui-btn-primary' data-open="{:url('index/index')}">已安装插件</button>
{/if}

{/block}

{block name='content'}
<style>

    .plugin-header-name {
        font-size: 22px;
        font-weight: 500
    }

    .plugin-header-desc {
        color: #999;
        font-size: 14px;
        margin-top: 8px;
    }

    .plugin-item {
    }

    .plugin-item:hover .uploadimage {
        background-position: 0 0 !important;
    }

    .plugin-item-icon {
        width: 100%;
        padding-top: 30%;
        margin-bottom: 0;
    }

    .plugin-item-name {
        left: 0;
        right: 0;
        color: #fff;
        bottom: 0;
        padding: 0.8em 0;
        position: absolute;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .plugin-item-tags {
        top: 0;
        left: 0;
        right: 0;
        padding: 3px 5px;
        position: absolute;
    }

    .plugin-item-tags .layui-badge {
        box-shadow: 1px 1px 2px 0 rgba(50, 50, 54, 0.5);
    }


</style>

<div class="layui-card think-box-shadow">
    <div class="layui-card-body">
        <div class="plugin-header text-center">
            <div class="plugin-header-name">插件市场</div>
            <div class="plugin-header-desc">基于 ThinkAdmin 框架开发的应用和插件！</div>
        </div>
    </div>
</div>

<div class="layui-card think-box-shadow">

    <div class="layui-card-body">

        <form class="layui-form" onsubmit="return false">
            筛选条件：{foreach ['官方应用', '第三方应用'] as $tag}
            <label class="think-checkbox margin-top-0 margin-bottom-0">
                <input type="checkbox" lay-ignore> {$tag|default=''}
            </label>
            {/foreach}
            <label class="inline-block"><input class="layui-input" style="height:30px;line-height:30px" placeholder="请输入搜索插件"></label>
            <button class="layui-btn layui-btn-sm margin-left-5" style="margin-top:-5px">确 认</button>
        </form>

        <div class="layui-row layui-col-space20 margin-top-20">
            {foreach $items as $item}
            <div class="layui-col-xs12 layui-col-md6 layui-col-sm4 layui-col-lg3">
                <div class="plugin-item" data-open="{:url('show')}?code={$item.code}">
                    <div class="plugin-item-icon uploadimage" style="background-image:url('{$item.cover|default=\'\'}')">
                        <div class="plugin-item-tags">
                            {if empty(floatval($item.amount))}
                            <span class="layui-badge layui-bg-green">免费</span>
                            {else}
                            <span class="layui-badge layui-bg-blue">￥{$item.amount|default='0.00'}</span>
                            {/if}
                            <span class="layui-badge layui-bg-cyan">{$item.code|default=''}</span>
                            {notempty name='item.version'}
                            <span class="layui-badge think-bg-violet">已安装：{$item.version|default=''}</span>
                            {/notempty}
                        </div>
                        <div class="plugin-item-name">
                            <div class="layui-elip">{$item.name}</div>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
        <div>

        </div>
    </div>
</div>
{/block}